<template>
  <div>
    <el-button type="primary" @click="openAddDialog">+ 新增</el-button>
    <el-table :data="tableData" border style="width: 100%; margin-top: 16px">
      <el-table-column prop="name" label="方案名称" />
      <el-table-column label="关联角色">
        <template #default="{ row }">
          <el-select v-model="row.role" placeholder="请选择角色" style="width: 180px" :disabled="true">
            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="关联组织">
        <template #default="{ row }">
          <el-select v-model="row.org" placeholder="请选择组织机构" style="width: 180px" :disabled="true">
            <el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="终端类型">
        <template #default="{ row }">
          <el-select v-model="row.terminal" placeholder="请选择终端类型" style="width: 120px" :disabled="true">
            <el-option v-for="item in terminalOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="是否私有">
        <template #default="{ row }">
          <span>{{ row.private ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row, $index }">
          <el-button type="primary" size="small" @click="openEditDialog(row, $index)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteRow($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form :model="form" label-width="90px">
        <el-form-item label="方案名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="关联角色">
          <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联组织">
          <el-select v-model="form.org" placeholder="请选择组织机构" style="width: 100%">
            <el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="终端类型">
          <el-select v-model="form.terminal" placeholder="请选择终端类型" style="width: 100%">
            <el-option v-for="item in terminalOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否私有">
          <el-switch v-model="form.private" active-text="是" inactive-text="否" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const tableData = ref([
  { name: '测试方案', role: 'base', org: 'org1', terminal: 'web', private: false },
  { name: '2233', role: 'white', org: 'org2', terminal: 'web', private: false },
  { name: '测试方案-副本', role: '', org: '', terminal: 'web', private: true },
  { name: '超级管理员后台', role: 'sysAdmin', org: '', terminal: 'web', private: true },
])

const roleOptions = ref([])
const orgOptions = ref([])
const terminalOptions = ref([])

const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = reactive({ name: '', role: '', org: '', terminal: '', private: false })
let editIndex = -1

function fetchRoleOptions() {
  // 模拟接口
  roleOptions.value = [
    { label: '基础角色', value: 'base' },
    { label: '登录-所需基础模块', value: 'login' },
    { label: '白名单专用角色', value: 'white' },
    { label: 'sysAdmin', value: 'sysAdmin' },
  ]
}
function fetchOrgOptions() {
  orgOptions.value = [
    { label: '井工矿', value: 'org1' },
    { label: '初级机构', value: 'org2' },
    { label: '示范井+1', value: 'org3' },
  ]
}
function fetchTerminalOptions() {
  terminalOptions.value = [
    { label: '网页端', value: 'web' },
    { label: '移动端', value: 'mobile' },
  ]
}

onMounted(() => {
  fetchRoleOptions()
  fetchOrgOptions()
  fetchTerminalOptions()
})

function openAddDialog() {
  dialogTitle.value = '新增方案'
  Object.assign(form, { name: '', role: '', org: '', terminal: '', private: false })
  dialogVisible.value = true
  editIndex = -1
}
function openEditDialog(row, index) {
  dialogTitle.value = '编辑方案'
  Object.assign(form, row)
  dialogVisible.value = true
  editIndex = index
}
function handleSubmit() {
  if (!form.name) return
  if (editIndex === -1) {
    tableData.value.push({ ...form })
  } else {
    tableData.value[editIndex] = { ...form }
  }
  dialogVisible.value = false
}
function deleteRow(index) {
  tableData.value.splice(index, 1)
}
</script>

<style scoped>
.el-table th {
  background: #409EFF;
  color: #fff;
  font-weight: 500;
}
.el-table .el-select {
  pointer-events: none;
}
</style> 